import React from 'react';
import { Image, Rate } from 'antd-mobile';
import { EditSFill, HeartOutline, HeartFill } from 'antd-mobile-icons'
import './DetailComment.min.css'
function DetailComment({ coms }) {
   console.log('coms', coms);
   return coms && (
      <div className="comment_box">
         {/* top */}
         <div className='hd_comment'>
            <div className="com_left">
               <div className="temp"></div>
               <div className="temp_1">评论</div>
            </div>
            <div className="com_right">
               <EditSFill style={{ fontSize: 16, marginRight: 10 }} color="#ccc" />
               写评论</div>
         </div>
         {/* 用户评论 */}
         <ul className="info_comment">
            {
               coms.list.map((item, index) => (
                  // 用户评论信息
                  <li className="com_item" key={index}>
                     <Image src={item.avatar}
                      style={{ borderRadius: 50 }} 
                      width={40} height={40} fit='fill'
                      lazy={true}
                       />
                     {/* top  name */}
                     <div className="item_right">
                        <div className="r_top">
                           <div className="username">
                              <p className="name">{item.nickName}</p>
                              {/* 评分 */}
                              <div className="score">
                                 <Rate style={{
                                    "--star-size": "13px",
                                 }} readOnly allowHalf value={item.grade} />
                                 <span className='timer'>{new Date(item.time).toLocaleDateString()} {new Date(item.time).toTimeString().split(" ")[0]}</span>
                              </div>
                           </div>
                           {/* 点赞 */}
                           <div className="like_click">
                              <span className="nums">{item.likes}</span>
                              {/* <HeartFill /> */}
                              <HeartOutline />
                           </div>
                        </div>
                        {/* 评论内容 */}
                        <div className="r_comment">{item.comment}</div>
                        {/* <div>
                        {
                           item.replyList.map((re)=>(
                              <div className="r_reply">{re.nickName} 回复 {re.toNickName} :{re.comment}</div>
                           ))
                        }
                        </div> */}
                     </div>
                  </li>

               ))
            }
         </ul>
      </div>
   );
}

export default DetailComment;